<template>
  <div id="searchViewSynthesize">
    <!-- 歌手展示-->
    <div>
      <div>
        <div
          :style="{
            backgroundImage: 'url(' + artist.img1v1Url + ')',
            backgroundSize: '100%,100%',
          }"
        ></div>
        <div>
          <span>歌手: {{ artist.name }}</span
          ><br />
          <span>专辑：{{ artist.albumSize }} mv：{{ artist.mvSize }}</span>
        </div>
      </div>
    </div>

    <!-- 单曲 -->
    <div>
      <div>
        <ul>
          <li>
            <div>单曲</div>
            <div>
              <van-tag size="medium" color="#acf6ef" text-color="#ad0000"
                ><span class="bobafont bobamusic-shipin"></span>播放</van-tag
              >
            </div>
          </li>
          <li v-for="(item, index) in synData.song.songs" :key="index">
            <div class="singleItem">
              <van-row>
                <van-col span="23" @click="playClick(item)">
                  <div style="height: 25px; lineheight: 25px; fontsize: 15px">
                    {{ item.name }}
                  </div>
                  <div style="height: 25px; font-size: 13px; lineheight: 25px">
                    {{ item.ar[0].name }}
                  </div>
                </van-col>
                <van-col
                  @click.stop="addPlayMusicList(item)"
                  span="1"
                  style="transform: rotate(90deg); lineheight: 50px"
                  ><span
                    style="font-size: 20px"
                    class="bobafont bobamusic-gengduo"
                  ></span
                ></van-col>
              </van-row>
            </div>
          </li>
          <li>{{ synData.song.moreText }}></li>
        </ul>
      </div>
    </div>

    <!-- 歌单 -->
    <div>
      <div>
        <li>歌单</li>
        <li
          v-for="item in synData.playList.playLists"
          :key="item.index"
          @click="playMusicList(item)"
        >
          <div class="songListItem">
            <div
              :style="{
                backgroundImage: 'url(' + item.coverImgUrl + ')',
                backgroundSize: '100%,100%',
              }"
            ></div>
            <div>
              <div>{{ item.name }}</div>
              <div>
                {{ item.trackCount }}首 ,by {{ item.creator.nickname }}, 播放{{
                  (item.playCount / 10000).toFixed(1)
                }}万次
              </div>
            </div>
          </div>
        </li>
        <li>{{ synData.playList.moreText }}</li>
      </div>
    </div>
    <!-- 视频 -->
    <div>
      <div>
        <li>视频</li>
        <li
          v-for="item in synData.video.videos"
          :key="item.index"
          @click="playmv(item)"
        >
          <div class="songListItem">
            <div
              :style="{
                backgroundImage: 'url(' + item.coverUrl + ')',
                backgroundSize: '100%,100%',
              }"
            >
              <van-icon name="play" />
            </div>
            <div>
              <div>{{ item.title }}</div>
              <div>
                {{ timestamptoTime(item.durationms) }} ,
                {{ item.creator[0].userName }}, 播放{{
                  (item.playTime / 10000).toFixed(1)
                }}万次
              </div>
            </div>
          </div>
        </li>
        <li>{{ synData.playList.moreText }}</li>
      </div>
    </div>
  </div>
</template>

<script>
import { searchKeyWords } from "network/api/SearchViewApi";

export default {
  data() {
    return {
      synData: {},
      artist: {},
    };
  },
  methods: {
    timestamptoTime(timeStamp) {
      let date = new Date(timeStamp);
      let min = date.getMinutes();
      let sec = date.getSeconds();
      let dateStr = "";
      if (min < 10) {
        min = "0" + min;
      }
      if (sec < 10) {
        sec = "0" + sec;
      }
      return min + ":" + sec;
    },
    playClick(item) {
      this.$emit("playmusic", item);
    },
    playmv(item) {
      console.log(item);
      this.$emit("playmv", item);
    },
    playMusicList(item) {
      this.$emit("playmusiclist", item);
    },
    addPlayMusicList(item) {
      this.$emit("addmusiclist", item);
    },
  },
  computed: {
    curretKeyWord() {
      return this.$store.state.keyWord;
    },
  },
  mounted() {
    // console.log("第一次调用");
    // searchKeyWords(this.curretKeyWord, 1, 1018).then((res) => {
    //   console.log(res);
    //   // 初始化歌曲
    //   this.synData = res.data.result;
    // });
    // searchKeyWords(this.curretKeyWord, 1, 100).then((res) => {
    //   console.log(res);
    //   // 初始化歌曲
    //   this.artist = res.data.result.artists[0];
    // });
  },
  watch: {
    curretKeyWord() {
      console.log("我是监听方法");
      searchKeyWords(this.curretKeyWord, 1, 1018).then((res) => {
        console.log(res);
        // 初始化歌曲
        this.synData = res.data.result;
      });
      searchKeyWords(this.curretKeyWord, 1, 100).then((res) => {
        console.log(res);
        // 初始化歌曲
        this.artist = res.data.result.artists[0];
      });
    },
  },
};
</script>

<style lang="less">
#searchViewSynthesize {
  padding-bottom: 20px;
  background-color: #acf6ef;
  > div:first-child {
    height: 120px;
    margin-top: 20px;
    position: relative;
    > div {
      height: 100px;
      width: 95%;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      > div:first-child {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        left: 50%;
        top: -20%;
        transform: translate(-50%);
        background-size: 100% 100%;
      }
      > div:last-child {
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 10px;
        > span:nth-of-type(1) {
          font-weight: bold;
          font-size: 14px;
        }
        > span:nth-of-type(2) {
          font-size: 12px;
        }
      }
    }
  }
  > div:nth-child(2) {
    margin-top: 20px;
    position: relative;
    > div {
      width: 95%;
      background-color: #fff;
      margin: 0 auto;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      border-radius: 10px;
      > ul {
        padding: 10px;
        > li {
          &:first-child {
            height: 30px;
            display: flex;
            > div {
              flex: 1;
              &:first-child {
                font-size: 15px;
                font-weight: bold;
              }
              &:last-child {
                text-align: right;
              }
            }
          }

          &:last-child {
            height: 20px;
            border-bottom: 1px solid transparent;
            text-align: center;
            color: gray;
            font-size: 13px;
            margin-top: 10px;
          }
          border-bottom: 1px solid #ebedf0;
          height: 50px;
        }
      }
    }
  }
  > div:nth-child(3) {
    width: 95%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    li {
      list-style: none;
      padding: 10px;
      &:last-child {
        height: 20px;
        text-align: center;
        color: gray;
        font-size: 13px;
        margin-top: 5px;
      }
    }
    > div .songListItem {
      height: 50px;
      display: flex;
      > div:first-child {
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 6px;
      }
      > div:last-child {
        flex: 9;
        > div {
          font-size: 13px;
          font-weight: bold;
          line-height: 25px;
          padding: 0 10px;
          height: 25px;
          &:last-child {
            font-weight: normal;
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            max-width: 200px;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  > div:last-child {
    width: 95%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    li {
      list-style: none;
      padding: 10px;
      &:last-child {
        height: 20px;
        text-align: center;
        color: gray;
        font-size: 13px;
        margin-top: 5px;
      }
    }
    > div .songListItem {
      height: 50px;
      display: flex;
      > div:first-child {
        width: 80px;
        height: 50px;
        background-color: red;
        border-radius: 6px;
        position: relative;
        > i {
          color: #ffffffbb;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      > div:last-child {
        flex: 9;
        > div {
          font-size: 13px;
          font-weight: bold;
          line-height: 25px;
          padding: 0 10px;
          height: 25px;
          white-space: nowrap;
          overflow: hidden;
          max-width: 200px;
          text-overflow: ellipsis;
          &:last-child {
            font-weight: normal;
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>